<template>
    <router-view></router-view>
</template>

<script setup>
    import {ElMessage} from 'element-plus';
    import {getCurrentInstance, onMounted} from 'vue';
    import {useStore} from 'vuex';

    const {proxy} = getCurrentInstance();
    const store = useStore();
    let refresh = true;//是否刷新页面

    onMounted(() => {
        proxy.$socket.io.on('connect', async () => {
            await store.dispatch('handleChangeConnectStatus', true);
            if (!refresh) {
                proxy.$socket.io.emit('login', store.getters.getUserInfo);
                ElMessage({
                    showClose: false,
                    message: 'socket通信连接',
                    type: 'success',
                });
            }
            refresh = false;
        });
        proxy.$socket.io.on('disconnect', async () => {
            await store.dispatch('handleChangeConnectStatus', false);
            ElMessage({
                showClose: false,
                message: 'socket通信断开',
                type: 'error',
            });
        });
        proxy.$socket.io.on('connect_error', async () => {
            await store.dispatch('handleChangeConnectStatus', false);
        });
    })
</script>

<style lang="less">
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        min-width: 1200px;
        overflow: hidden;
    }

    .height-100-percent {
        height: 100%;
    }

    .custom-scrollbar {

        &.none {
            &::-webkit-scrollbar {
                width: 0;
            }
        }

        &::-webkit-scrollbar-button {
            display: none;
        }

        &::-webkit-scrollbar {
            width: 8px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }

        &::-webkit-scrollbar-thumb {
            background: #ddd;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    }

    //单行文字隐藏
    .line-one-hidden {
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        height: 100%;
    }

    a {
        font-size: 12px;
        color: #909399;
        text-decoration: none;

        &:hover {
            color: var(--color);
        }
    }

    .flex {
        display: flex;

        &.align-items-center {
            align-items: center;
        }

        &.space-between {
            justify-content: space-between;
        }

        &.justify-content-center {
            justify-content: center;
        }

        &.justify-content-end {
            justify-content: flex-end;
        }

        &.flex-direction-column {
            flex-direction: column;
        }

        &.flex-direction-row-reverse {
            flex-direction: row-reverse;
        }

        .align-self-end {
            align-self: flex-end;
        }

        .flex-grow-1 {
            flex-grow: 1;
        }
    }
</style>
